<template>
  <div class="transactions-page">
    <!-- 标题区域 -->
    <div class="page-header">
      <div class="header-left">
        <h2>交易记录</h2>
        <div class="description">共 {{ totalItems }} 条记录</div>
      </div>
    </div><template>
  <div>
    <!-- 页面标题区域 -->
    <div class="page-header">
      <div class="header-left">
        <h2>交易记录</h2>
        <div class="description">共 {{ totalItems }} 条记录</div>
      </div>
    </div>

    <!-- 搜索区域 -->
    <div class="search_box">
      <el-row :gutter="24">
        <el-col :span="20">
          <el-input
            v-model="queryInfo.phone"
            class="w-50 m-2"
            size="large"
            placeholder="搜索用户手机号"
            :prefix-icon="Search"
          />
        </el-col>

        <el-col :span="4">
          <Select v-model="queryInfo.status" :data="userStatus" @change="searchTable" />
        </el-col>
      </el-row>
    </div>

    <!-- 表格区域 -->
    <div class="margin-top">
      <el-table
        ref="multipleTableRef"
        :data="listData"
        style="width: 100%"
      >
      <el-table-column label="交易ID" property="order_on" width="140"></el-table-column>

      <el-table-column label="交易时间" property="create_time"></el-table-column>

      <el-table-column label="交易类型" property="user_name"></el-table-column>

      <el-table-column label="金额" property="pay_money"></el-table-column>

      <el-table-column label="关联用户" property=""></el-table-column>

      <el-table-column label="关联订单" property=""></el-table-column>

      <el-table-column property="status" label="交易状态">
        <template #default="scope">
          <template v-for="item in payStatusData">
            <el-tag
              class="ml-2"
              :key="item.id"
              :color="item.color"
              v-if="scope.row.status === item.value"
              >
              {{ item.label }}
            </el-tag>
          </template>
        </template>
      </el-table-column>

      <el-table-column label="操作" width="120">
        <template #default="scope">
          <div class="flex align-center">
            <el-button
              class="margin-left-xs"
              size="small"
              plain
              type="default"
              >查看详情</el-button
            >
          </div>
        </template>
      </el-table-column>
    </el-table>
    </div>

    <!-- 分页区域 -->
    <div class="margin-top">
      <Pagination
        :total="total"
        @change="changePage"
      />
    </div>

    <!-- 用户表单 -->
    <UserFormModal
      ref="userFormModalRef"
      :userTypeData="userTypes"
      :userStatusData="userStatus"
      @reload="searchTable"
    />
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, computed, toRef, onMounted, watch } from 'vue'
import Select from '@/components/admin/Select.vue'
import { useRoute } from 'vue-router'
import { useRouter } from 'vue-router';
import useTableHook from '@/hooks/useTableHook'
import { GetPayAndEditApi } from '@/api/index'
import { RefreshRight } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import Pagination from '@/components/admin/Pagination.vue'
import UserFormModal from '@/components/admin/users/UserFormModal.vue';

const router = useRouter();

// 用户表单
const userFormModalRef = ref()

const openUserModal = (data = {}) => {
  userFormModalRef.value.open({
    data: {
      ...data,
      classId: data.is_fictitious
    }
  })
}

const payType = [
  {
    label: 'U支付',
    value: 0
  }
]

const userTypes = [
  {
    label: '全部',
    value: ''
  },
  {
    label: '区域代理',
    value: 1,
  },
  {
    label: '店铺',
    value: 2,
  },
  {
    label: '经销商',
    value: 3,
  },
  {
    label: '普通用户',
    value: 0
  },
]

const userStatus = [
  {
    label: '冻结',
    value: 0,
    type: 'error'
  },
  {
    label: '正常',
    value: 1,
    type: 'success'
  }
]

const payStatusData = [
  {
    label: '全部状态',
    value: ''
  },
  {
    label: '发起提款',
    value: 0,
    color: '#f4f4f5'
  },
  {
    label: '区域代理同意',
    value: 1,
    color: '#409eff'
  },
  {
    label: '等待最后确认',
    value: 4,
    color: '#e6a23c'
  },
  {
    label: '通过',
    value: 5,
    color: '#66c03a'
  },
  {
    label: '驳回',
    value: 6,
    color: '#909399'
  },
]

const queryInfo = ref({
  page: 1,
  limit: 10,
})

const handleUserStatus = (record, status) => {
  let statusText = record.status == 1 ? '禁用' : '启用'

  ElMessageBox.confirm (`确认${statusText}用户: ${record.user_name}`, {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
  }).then(async () => {
    try {
        let newVal = JSON.parse(JSON.stringify(record))

        newVal.status = status

        newVal.method = 'edit'

        const res = await UserAddAndEdit(newVal)

        ElMessage({
          type: 'success',
          message: `${statusText}成功!`
        })

        searchTable()
      } catch(err) {
        ElMessage({
          type: 'error',
          message: `${statusText}失败!`,
        })
      }
  })
}

// 查看用户详情
const viewUserDetails = (user: any) => {
  // 跳转到用户详情页面
  router.push(`/admin/users/${user.id}`);
};

onMounted(() => {
  initTable()
})

const {
  total,
  listData,
  searchTable,
  initTable,
  changePage,
} = useTableHook(queryInfo.value, GetPayAndEditApi, {
  resType: 2
})
</script>

<style lang="scss">
$primary: #3498db;

/* 头部区域样式 *//* 页面标题区域 */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  background-color: white;
  padding: 20px 24px;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}

.page-header h1 {
  font-size: 24px;
  font-weight: 600;
  color: #2c3e50;
  margin: 0;
  position: relative;
}

.page-header h1::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -8px;
  width: 40px;
  height: 3px;
  background-color: $primary;
  border-radius: 3px;
}

.btn-create {
  background-color: $primary;
  color: white;
  border: none;
  border-radius: 8px;
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-create:hover {
  background-color: darken($primary, 10%);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(66, 153, 225, 0.3);
}

.btn-create::before {
  content: '+';
  font-size: 18px;
  font-weight: 500;
}

.title-section {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.page-title {
  font-size: 24px;
  font-weight: 600;
  margin: 0;
  color: #2c3e50;
}

.merchant-name {
  color: #e74c3c;
}

.back-link {
  display: inline-flex;
  align-items: center;
  font-size: 14px;
  color: #7f8c8d;
  text-decoration: none;
  transition: color 0.3s;
  margin-top: 5px;
}

.back-link:hover {
  color: #e74c3c;
}

.back-link i {
  margin-right: 5px;
}

.header-actions {
  display: flex;
  gap: 10px;
}

.btn-primary {
  background-color: #e74c3c;
  color: white;
  border: none;
  padding: 10px 15px;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  font-weight: 600;
  transition: background-color 0.3s;
}

.btn-primary:hover {
  background-color: #c0392b;
}

.btn-primary i {
  margin-right: 5px;
}
</style>


    <!-- 筛选区域 -->
    <div class="filter-section">
      <div class="search-box">
        <input
          type="text"
          v-model="searchQuery"
          placeholder="搜索交易ID或用户信息"
          @input="handleSearch"
          class="search-input"
        />
        <i class="fas fa-search search-icon"></i>
      </div>

      <div class="filter-date">
        <div class="date-label">交易日期:</div>
        <div class="date-picker">
          <input
            type="date"
            v-model="dateRange.startDate"
            class="date-input"
            @change="filterByDate"
          />
          <span class="date-separator">-</span>
          <input
            type="date"
            v-model="dateRange.endDate"
            class="date-input"
            @change="filterByDate"
          />
        </div>
      </div>

      <div class="filter-type">
        <div class="type-label">交易类型:</div>
        <select v-model="typeFilter" @change="filterByType" class="type-select">
          <option value="all">全部</option>
          <option value="订单支付">订单支付</option>
          <option value="佣金结算">佣金结算</option>
          <option value="提现">提现</option>
        </select>
      </div>

      <button class="btn-reset" @click="resetFilters">重置</button>
      <button class="btn-export" @click="exportData">导出</button>
    </div>

    <!-- 表格区域 -->
    <div class="table-container">
      <table class="transactions-table">
        <thead>
          <tr>
            <th>交易ID</th>
            <th>交易时间</th>
            <th>交易类型</th>
            <th>金额</th>
            <th>关联用户</th>
            <th>关联订单</th>
            <th>交易状态</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-if="isLoading">
            <td colspan="8" class="loading-cell">
              <div class="loading-spinner"></div>
              <div class="loading-text">加载中...</div>
            </td>
          </tr>
          <tr v-else-if="displayedTransactions.length === 0">
            <td colspan="8" class="empty-cell">
              暂无数据
            </td>
          </tr>
          <tr v-for="item in displayedTransactions" :key="item.id">
            <td>{{ item.id }}</td>
            <td>{{ item.transactionDate }} {{ item.transactionTime }}</td>
            <td>
              <span class="type-tag" :style="{ backgroundColor: item.typeColor + '33', color: item.typeColor }">
                {{ item.transactionType }}
              </span>
            </td>
            <td>
              <span class="amount" :class="item.flow === 'income' ? 'income' : 'expense'">
                {{ item.flow === 'income' ? '+' : '-' }} {{ item.amount.toFixed(2) }}
              </span>
            </td>
            <td>
              <div class="user-info">
                <div class="username">{{ item.username }}</div>
                <div class="user-type" :class="getUserTypeClass(item.userType)">
                  {{ item.userType }}
                </div>
              </div>
            </td>
            <td>
              <span v-if="item.relatedOrder">{{ item.relatedOrder }}</span>
              <span v-else>-</span>
            </td>
            <td>
              <span class="status-tag" :style="{ backgroundColor: item.statusColor }">
                {{ item.status }}
              </span>
            </td>
            <td>
              <div class="actions">
                <button class="btn-action" @click="viewDetails(item)">
                  查看详情
                </button>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <!-- 分页区域 -->
    <div class="pagination">
      <button
        class="btn-page"
        :class="{ disabled: currentPage === 1 }"
        @click="changePage(currentPage - 1)"
        :disabled="currentPage === 1"
      >
        上一页
      </button>

      <div class="page-numbers">
        <button
          v-for="page in displayedPages"
          :key="page"
          class="btn-page-number"
          :class="{ active: currentPage === page }"
          @click="changePage(page)"
        >
          {{ page }}
        </button>
      </div>

      <button
        class="btn-page"
        :class="{ disabled: currentPage === totalPages }"
        @click="changePage(currentPage + 1)"
        :disabled="currentPage === totalPages"
      >
        下一页
      </button>

      <div class="page-info">
        {{ currentPage }} / {{ totalPages }} 页
      </div>
    </div>

    <!-- 交易详情模态框 -->
    <div v-if="detailModalVisible" class="modal">
      <div class="modal-content">
        <div class="modal-header">
          <h3>交易详情</h3>
          <button class="btn-close" @click="closeDetailModal">&times;</button>
        </div>
        <div class="modal-body">
          <div class="detail-row">
            <div class="detail-label">交易ID:</div>
            <div class="detail-value">{{ selectedTransaction.id }}</div>
          </div>
          <div class="detail-row">
            <div class="detail-label">交易时间:</div>
            <div class="detail-value">{{ selectedTransaction.transactionDate }} {{ selectedTransaction.transactionTime }}</div>
          </div>
          <div class="detail-row">
            <div class="detail-label">交易类型:</div>
            <div class="detail-value">
              <span class="type-tag" :style="{ backgroundColor: selectedTransaction.typeColor + '33', color: selectedTransaction.typeColor }">
                {{ selectedTransaction.transactionType }}
              </span>
            </div>
          </div>
          <div class="detail-row">
            <div class="detail-label">金额:</div>
            <div class="detail-value">
              <span class="amount" :class="selectedTransaction.flow === 'income' ? 'income' : 'expense'">
                {{ selectedTransaction.flow === 'income' ? '+' : '-' }} {{ selectedTransaction.amount.toFixed(2) }}
              </span>
            </div>
          </div>
          <div class="detail-row">
            <div class="detail-label">交易状态:</div>
            <div class="detail-value">
              <span class="status-tag" :style="{ backgroundColor: selectedTransaction.statusColor }">
                {{ selectedTransaction.status }}
              </span>
            </div>
          </div>
          <div class="detail-row">
            <div class="detail-label">用户ID:</div>
            <div class="detail-value">{{ selectedTransaction.userId }}</div>
          </div>
          <div class="detail-row">
            <div class="detail-label">用户名:</div>
            <div class="detail-value">{{ selectedTransaction.username }}</div>
          </div>
          <div class="detail-row">
            <div class="detail-label">用户类型:</div>
            <div class="detail-value">
              <span class="user-type" :class="getUserTypeClass(selectedTransaction.userType)">
                {{ selectedTransaction.userType }}
              </span>
            </div>
          </div>
          <div class="detail-row" v-if="selectedTransaction.relatedOrder">
            <div class="detail-label">关联订单:</div>
            <div class="detail-value">{{ selectedTransaction.relatedOrder }}</div>
          </div>
          <div class="detail-row" v-if="selectedTransaction.remarks">
            <div class="detail-label">备注:</div>
            <div class="detail-value">{{ selectedTransaction.remarks }}</div>
          </div>
        </div>
        <div class="modal-footer">
          <button class="btn-cancel" @click="closeDetailModal">关闭</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue';
import { generateTransactionsData } from '@/utils/adminMock';

// 交易记录
const transactions = ref<any[]>([]);
const filteredTransactions = ref<any[]>([]);
const selectedTransaction = ref<any>({});

// 加载状态
const isLoading = ref(true);

// 分页设置
const currentPage = ref(1);
const pageSize = ref(10);

// 筛选条件
const searchQuery = ref('');
const dateRange = ref({
  startDate: '',
  endDate: ''
});
const typeFilter = ref('all');

// 模态框状态
const detailModalVisible = ref(false);

// 加载交易记录数据
const loadTransactions = () => {
  isLoading.value = true;
  setTimeout(() => {
    transactions.value = generateTransactionsData(80);
    filteredTransactions.value = [...transactions.value];
    isLoading.value = false;
  }, 500);
};

// 计算属性
const totalItems = computed(() => filteredTransactions.value.length);
const totalPages = computed(() => Math.ceil(totalItems.value / pageSize.value));

// 当前页显示的交易记录
const displayedTransactions = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value;
  const end = start + pageSize.value;
  return filteredTransactions.value.slice(start, end);
});

// 显示的页码数组
const displayedPages = computed(() => {
  const range = 3; // 显示当前页左右各3页
  let start = Math.max(currentPage.value - range, 1);
  let end = Math.min(currentPage.value + range, totalPages.value);

  // 调整以确保总是显示固定数量的页码
  const displayCount = range * 2 + 1;
  if (end - start + 1 < displayCount) {
    if (start === 1) {
      end = Math.min(displayCount, totalPages.value);
    } else if (end === totalPages.value) {
      start = Math.max(1, totalPages.value - displayCount + 1);
    }
  }

  const pages = [];
  for (let i = start; i <= end; i++) {
    pages.push(i);
  }
  return pages;
});

// 处理搜索
const handleSearch = () => {
  applyFilters();
};

// 按日期筛选
const filterByDate = () => {
  applyFilters();
};

// 按交易类型筛选
const filterByType = () => {
  applyFilters();
};

// 应用所有筛选条件
const applyFilters = () => {
  let filtered = [...transactions.value];

  // 应用搜索条件
  if (searchQuery.value.trim()) {
    const query = searchQuery.value.toLowerCase();
    filtered = filtered.filter(item =>
      item.id.toLowerCase().includes(query) ||
      item.username.toLowerCase().includes(query) ||
      (item.relatedOrder && item.relatedOrder.toLowerCase().includes(query))
    );
  }

  // 应用日期筛选
  if (dateRange.value.startDate && dateRange.value.endDate) {
    const startDate = new Date(dateRange.value.startDate);
    const endDate = new Date(dateRange.value.endDate);
    endDate.setHours(23, 59, 59); // 设置为当天结束时间

    filtered = filtered.filter(item => {
      const itemDate = new Date(`${item.transactionDate} ${item.transactionTime}`);
      return itemDate >= startDate && itemDate <= endDate;
    });
  }

  // 应用交易类型筛选
  if (typeFilter.value !== 'all') {
    filtered = filtered.filter(item => item.transactionType === typeFilter.value);
  }

  filteredTransactions.value = filtered;
  currentPage.value = 1; // 重置到第一页
};

// 重置所有筛选条件
const resetFilters = () => {
  searchQuery.value = '';
  dateRange.value = {
    startDate: '',
    endDate: ''
  };
  typeFilter.value = 'all';
  filteredTransactions.value = [...transactions.value];
  currentPage.value = 1;
};

// 切换页码
const changePage = (page: number) => {
  if (page < 1 || page > totalPages.value) return;
  currentPage.value = page;
};

// 根据用户类型获取样式类名
const getUserTypeClass = (userType: string) => {
  switch (userType) {
    case '区域代理': return 'agent';
    case '分销商': return 'distributor';
    default: return 'normal';
  }
};

// 查看详情
const viewDetails = (item: any) => {
  selectedTransaction.value = { ...item };
  detailModalVisible.value = true;
};

// 关闭详情模态框
const closeDetailModal = () => {
  detailModalVisible.value = false;
};

// 导出数据
const exportData = () => {
  alert('导出功能待实现');
  // 这里可以实现导出功能，例如生成CSV文件下载
};

// 组件挂载时加载数据
onMounted(() => {
  loadTransactions();
});
</script>

<style lang="scss" scoped>
$primary: #409eff;
$success: #67c23a;
$warning: #e6a23c;
$danger: #f56c6c;
$info: #909399;
$text-primary: #303133;
$text-regular: #606266;
$text-secondary: #909399;
$border-color: #dcdfe6;
$border-light: #e4e7ed;
$background: #f5f7fa;

.transactions-page {
  padding: 20px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.header-left {
  h2 {
    margin: 0 0 8px 0;
    font-size: 22px;
    font-weight: 600;
    color: $text-primary;
  }

  .description {
    color: $text-secondary;
    font-size: 14px;
  }
}

.filter-section {
  background-color: white;
  border-radius: 4px;
  padding: 16px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}

.search-box {
  position: relative;
  flex: 1;
  min-width: 200px;

  .search-input {
    width: 100%;
    padding: 8px 12px 8px 32px;
    border: 1px solid $border-color;
    border-radius: 4px;
    font-size: 14px;

    &:focus {
      outline: none;
      border-color: $primary;
    }
  }

  .search-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: $text-secondary;
  }
}

.filter-date, .filter-type {
  display: flex;
  align-items: center;

  .date-label, .type-label {
    margin-right: 8px;
    color: $text-regular;
    font-size: 14px;
    white-space: nowrap;
  }
}

.date-picker {
  display: flex;
  align-items: center;

  .date-input {
    padding: 6px 10px;
    border: 1px solid $border-color;
    border-radius: 4px;
    font-size: 14px;
    width: 130px;

    &:focus {
      outline: none;
      border-color: $primary;
    }
  }

  .date-separator {
    margin: 0 8px;
    color: $text-secondary;
  }
}

.type-select {
  padding: 6px 10px;
  border: 1px solid $border-color;
  border-radius: 4px;
  font-size: 14px;
  min-width: 100px;

  &:focus {
    outline: none;
    border-color: $primary;
  }
}

.btn-reset, .btn-export {
  padding: 8px 16px;
  border: 1px solid $border-color;
  border-radius: 4px;
  color: $text-regular;
  cursor: pointer;
  transition: all 0.3s;
}

.btn-reset {
  background-color: $background;

  &:hover {
    background-color: darken($background, 3%);
  }
}

.btn-export {
  background-color: $primary;
  color: white;
  border-color: $primary;

  &:hover {
    background-color: darken($primary, 10%);
  }
}

.table-container {
  background-color: white;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
  margin-bottom: 20px;
}

.transactions-table {
  width: 100%;
  border-collapse: collapse;

  th, td {
    padding: 14px;
    text-align: left;
    font-size: 14px;
    border-bottom: 1px solid $border-light;
  }

  th {
    background-color: $background;
    color: $text-regular;
    font-weight: 500;
  }

  tr:hover {
    background-color: #f5f7fa;
  }

  .loading-cell, .empty-cell {
    text-align: center;
    padding: 40px;
    color: $text-secondary;
  }

  .loading-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .loading-spinner {
      width: 30px;
      height: 30px;
      border: 2px solid rgba(64, 158, 255, 0.1);
      border-top-color: $primary;
      border-radius: 50%;
      animation: spin 1s linear infinite;
      margin-bottom: 10px;
    }

    .loading-text {
      color: $text-secondary;
    }
  }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.type-tag {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
}

.amount {
  font-weight: 500;

  &.income {
    color: $success;
  }

  &.expense {
    color: $danger;
  }
}

.user-info {
  display: flex;
  flex-direction: column;

  .username {
    margin-bottom: 4px;
    color: $text-primary;
  }

  .user-type {
    display: inline-block;
    padding: 0 6px;
    line-height: 18px;
    font-size: 12px;
    border-radius: 10px;

    &.agent {
      background-color: #ecf5ff;
      color: $primary;
    }

    &.distributor {
      background-color: #f0f9eb;
      color: $success;
    }

    &.normal {
      background-color: #f4f4f5;
      color: $info;
    }
  }
}

.status-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  color: white;
}

.actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.btn-action {
  padding: 4px 10px;
  border: 1px solid $border-color;
  border-radius: 4px;
  background-color: white;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.3s;

  &:hover {
    background-color: $background;
    border-color: $primary;
    color: $primary;
  }
}

.pagination {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 16px;
  background-color: white;
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}

.btn-page, .btn-page-number {
  padding: 6px 12px;
  background-color: white;
  border: 1px solid $border-color;
  color: $text-regular;
  cursor: pointer;
  transition: all 0.3s;
  margin: 0 4px;

  &:hover:not(.disabled) {
    border-color: $primary;
    color: $primary;
  }

  &.active {
    background-color: $primary;
    color: white;
    border-color: $primary;
  }

  &.disabled {
    background-color: $background;
    color: $text-secondary;
    cursor: not-allowed;
  }
}

.page-numbers {
  display: flex;
  margin: 0 8px;
}

.page-info {
  margin-left: 16px;
  color: $text-secondary;
  font-size: 14px;
}

.modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-content {
  background-color: white;
  border-radius: 4px;
  width: 90%;
  max-width: 600px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.modal-header {
  padding: 16px 20px;
  border-bottom: 1px solid $border-light;
  display: flex;
  justify-content: space-between;
  align-items: center;

  h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: $text-primary;
  }

  .btn-close {
    background: none;
    border: none;
    font-size: 24px;
    color: $text-secondary;
    cursor: pointer;

    &:hover {
      color: $text-primary;
    }
  }
}

.modal-body {
  padding: 20px;
  max-height: 60vh;
  overflow-y: auto;
}

.modal-footer {
  padding: 16px 20px;
  border-top: 1px solid $border-light;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.detail-row {
  display: flex;
  margin-bottom: 16px;

  .detail-label {
    width: 100px;
    color: $text-secondary;
    font-size: 14px;
  }

  .detail-value {
    flex: 1;
    color: $text-primary;
    font-size: 14px;
  }
}

.btn-cancel {
  padding: 8px 16px;
  background-color: $background;
  border: 1px solid $border-color;
  border-radius: 4px;
  color: $text-regular;
  cursor: pointer;
  transition: all 0.3s;

  &:hover {
    background-color: darken($background, 3%);
  }
}

@media (max-width: 768px) {
  .filter-section {
    flex-direction: column;
    align-items: stretch;
  }

  .filter-date, .filter-type {
    flex-direction: column;
    align-items: flex-start;

    .date-label, .type-label {
      margin-bottom: 8px;
    }
  }

  .date-picker {
    width: 100%;
    flex-direction: column;

    .date-input {
      width: 100%;
      margin-bottom: 8px;
    }

    .date-separator {
      display: none;
    }
  }

  .type-select {
    width: 100%;
  }

  .btn-reset, .btn-export {
    width: 100%;
  }
}
</style>
